<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>${one.name}</title>
		<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
	</head>
	<style>
		.table-responsive {
			max-width: 800px;
			margin: 0 auto;
		}
	</style>
	<body>
		<div class="table-responsive">
			<h1>${one.name}</h1>
			<div id="rd" style="height: 500px;"></div>
		</div>
		<div style="height: 50px;"></div>
		<script src="/js/jquery.js"></script>
		<script src="/bootstrap/js/bootstrap.min.js"></script>
		<script src="/js/echarts.min.js"></script>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById("rd"));
			var option = {
				title: {
					text: 'pdp分数雷达图'
				},
				tooltip: {},
				radar: {
					name: {
						textStyle: {
							color: '#fff',
							backgroundColor: '#999',
							borderRadius: 3,
							padding: [3, 5]
						}
					},
					indicator: [{
							name: '老虎型(dominance)',
							max: 30
						},
						{
							name: '孔雀型(extroversion)',
							max: 30
						},
						{
							name: '考拉型(patience)',
							max: 30
						},
						{
							name: '猫头鹰型(precision)',
							max: 30
						},
						{
							name: '变色龙型(conformity)',
							max: 30
						}
					]
				},
				series: [{
					name: 'pdp性格分析',
					type: 'radar',
					data: [{
						value: [${one.dominanceScore}, ${one.extroversionScore},
							${one.patienceScore}, ${one.precisionScore},
                            ${one.conformityScore}],
						name: '${one.name}'
					}]
				}]
			}
			myChart.setOption(option);
		</script>
	</body>
</html>
